<template>
  <div class="item-card">
    <el-form label-width="80px" size="small">
      <el-popover
        placement="left"
        title="转换说明"
        width="200"
        trigger="hover"
        content="Cesium.Cartesian3.fromDegrees(longitude, latitude, height)">
        <div><strong>屏幕坐标</strong></div>
        <div>const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)</div>
        <div>handler.setInputAction(function (e) {}, Cesium.ScreenSpaceEventType.LEFT_CLICK)</div>
        <div>e.position.x,e.position.y</div>
        <div><strong>笛卡尔坐标</strong></div>
        <div>let ray = viewer.camera.getPickRay(e.position)</div>
        <div>let cartesian3 = viewer.scene.globe.pick(ray, viewer.scene)</div>
        <div>cartesian3.x,cartesian3.y,cartesian3.z</div>
        <h5 slot="reference" class="item-title">屏幕坐标转换<span style="font-size:0.8em;color:#999">(点击地图获取)</span></h5>
      </el-popover>
      <div class="title-small"><strong>屏幕坐标</strong></div>
      <el-form-item label="X">
        <el-input v-model="form.sx" placeholder="请输入内容" disabled></el-input>
      </el-form-item>
      <el-form-item label="Y">
        <el-input v-model="form.sy" placeholder="请输入内容" disabled></el-input>
      </el-form-item>
      <div class="title-small"><strong>笛卡尔坐标</strong></div>
      <el-form-item label="X">
        <el-input v-model="form.x" placeholder="请输入内容" disabled></el-input>
      </el-form-item>
      <el-form-item label="Y">
        <el-input v-model="form.y" placeholder="请输入内容" disabled></el-input>
      </el-form-item>
      <el-form-item label="Z">
        <el-input v-model="form.z" placeholder="请输入内容" disabled></el-input>
      </el-form-item>
      <el-form-item label="经度">
        <el-input v-model="form.lng" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="纬度">
        <el-input v-model="form.lat" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="高度">
        <el-input v-model="form.height" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as Cesium from 'cesium'
import ebus from '@/components/ebus.js'
import { screenToCartesianTerrain } from '@/components/dogeo/cesium/transform.js'

export default {
  name: 'wgs-to-cartesian',

  data () {
    return {
      form: {
        sx: 0,
        sy: 0,
        lng: 116.3905,
        lat: 39.9084,
        height: 1400000,
        x: -2654980.375354672,
        y: 5350650.692183396,
        z: 4968376.083493721
      }
    }
  },

  mounted () {
    ebus.$on('onClick', (e, viewer) => {
      this.form.sx = e.position.x
      this.form.sy = e.position.y
      this.to1(viewer, e)
      this.to2(viewer, e)
    })
  },

  beforeDestroy () {
    ebus.$off('onClick')
  },

  methods: {
    to1 (viewer, e) {
      let cartesian3 = screenToCartesianTerrain(viewer, e.position)
      this.form.x = cartesian3.x
      this.form.y = cartesian3.y
      this.form.z = cartesian3.z
    },
    to2 (viewer, e) {
      let cartesian3 = screenToCartesianTerrain(viewer, e.position)
      let cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
      this.form.lng = Cesium.Math.toDegrees(cartographic.longitude)
      this.form.lat = Cesium.Math.toDegrees(cartographic.latitude)
      this.form.height = cartographic.height
    }
  }
}
</script>

<style lang="less">
.item-card {
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.item-transform {
  margin-bottom: 8px;
}
.item-title {
  margin: 0;
  padding: 0 0 8px;
}
.title-small {
  font-size:12px;
  color:#666
}
</style>